{layout name="common/layout" /}
<link rel="stylesheet" type="text/css" href="__MERCHANT_STATIC__/style/css/message/message.css?v=2017.10.25" />
<div class="message_main_talk">
	<h3 class="message_main_title">
		物流信息
	</h3>
	<!-- 留言交互框 -->
	<ul class="message_main_content" style="height: 470px;background-color: white;">
		<template v-for="item in logisticsList">
			<template v-if="item.time">
				<div class="message_main_usertime">
					<span style="width: 150px;height: 15px;">{{item.time | dataForm}}</span>
				</div>
				<li class="message_main_user">
					<!-- 头像 -->
					<!--<img src=""  class="message_main_avatar">-->
					<p class="message_main_usertext">
						{{item.context}}
					</p>
				</li>
				
			</template>
                        <template v-if="item.opeTitle">
				<div class="message_main_usertime">
					<span style="width: 150px;height: 15px;">{{item.opeTime | dataForm}}</span>
				</div>
				<li class="message_main_user">
					<p class="message_main_usertext">
                                            标题：{{item.opeTitle}}<br/>详情：{{item.opeRemark}} <b style="float: right;">操作人：{{item.opeName}}</b>
					</p>
				</li>
				
			</template>
		</template>
	</ul>
	<!-- 文本作用域 -->
	<!--<textarea v-model="text" class="message_main_input" name="" id="" cols="30" rows="10">-->
	<!--</textarea>-->
	<!-- 提交按钮 -->
	<!--<button type="button" @click="submit" class="message_main_submit">-->
		<!--发送-->
	<!--</button>-->
</div>
<div class="dislpayArrow hidden-xs"><a class="pngfix" href="javascript:void(0);" onClick="displaynavbar(this)"></a></div>
<div class="Hui-article-box" style="margin-top: 37px;">
	<div class="breadcrumb"><i class="Hui-iconfont"></i> <a href="{:url('book/borrowOrder')}" >图书交易管理</a>
		<span class="c-999 en">&gt;</span>
		<a href="javascript:void(0);" >图书订单详情</a>
	</div>
	<div class="Hui-article">
			<div class="confirm">
				当前订单状态：
					{switch name="$order_detail.status"}
					{case value="-1"}成功订单{/case}
					{case value="1"}待支付{/case}
					{case value="2"}待发货{/case}
					{case value="3"}待收货{/case}
					{case value="4"}待归还{/case}
					{case value="5"}待结算{/case}
					{case value="6"}结算待确认{/case}
					{case value="7"}待评价{/case}
					{case value="8"}成功订单{/case}
					{case value="11"}退款中{/case}
					{case value="12"}退款成功{/case}
					{default /}无效订单
					{/switch}
			</div>
			<div class="article-order">
				  	<div class="recond-titles" >
					   <h3 >图书订单信息</h3>
					</div>
				 	<div class="detail_messBody">
						  <table class="table table-border table-bg  table-bordered">
						<tr class="text-l">
							<td colspan="8">
								<p class="order-p">
									<a href="">订单号:{$order_detail.order_sn}</a>
									<?php echo ($order_detail['is_renew'] == 1) ? "<font style='color:red;'>(存在续租)</font>" : "";?>
								</p>
							</td>
						</tr>
 						<tr class="text-c first-tr">
 							<td style="width: 220px;">会员卡</td>
 							<td>用户名</td>
 							<td>图书数量</td>
							{if condition="$order_detail.user_card_id eq '0'"}
							<td>总租金</td>
							<td>押金</td>
							<td>运费</td>
							<td>合计</td>
							{/if}
 							<td>订单状态</td>
							{if condition="$order_detail.status gt '2' && $order_detail.status lt '7'"}
							<td>操作</td>
							{/if}
  						</tr>
  						<tr  class="text-c">
							<td style="width: 250px;">
								{if condition="$order_detail.user_card_id neq '0'"}
									{if condition="$order_detail.status neq '1'"}
										{switch name="$order_detail.rank"}
										{case value="1"}小状元计划{/case}
										{case value="2"}小博士计划{/case}
										{case value="3"}免费体验计划{/case}
										{/switch}
										-
										{switch name="$order_detail.type"}
										{case value="1"}月卡{/case}
										{case value="2"}季卡{/case}
										{case value="3"}半年卡{/case}
										{case value="4"}年卡{/case}
										{/switch}
										({$order_detail.card_no})
									{else/}
										绘本直购
									{/if}
								{else/}
									绘本直购
								{/if}
							</td>
							<td>{$order_detail.user_phone}</td>
							<td>{$order_detail.book_num}</td>
							{if condition="$order_detail.user_card_id eq '0'"}
							<td>
								<?php if($order_detail['is_renew'] == 1){ ?>
								{$order_detail.rent_price+$order_detail.relet_info.pay_amount}(包含续租{$order_detail.relet_info.pay_amount}元)
								<?php }else{ ?>
								{$order_detail.rent_price}
								<?php } ?>
								{if condition="$order_detail.coupon_use_amount gt '0'"}(优惠券减免{$order_detail.coupon_use_amount}元){/if}
							</td>
							<td>{$order_detail.deposit}{if condition="$order_detail.deposit_relief gt '0'"}(芝麻减免{$order_detail.deposit_relief}元){/if}</td>
							<td>{$order_detail.freight}</td>
							<td>{$order_detail.pay_amount}</td>
							{/if}
							<td><span>
								       {switch name="$order_detail.status"}
											{case value="-1"}成功订单{/case}
											{case value="1"}待支付{/case}
											{case value="2"}待发货{/case}
											{case value="3"}待收货{/case}
											{case value="4"}待归还{/case}
											{case value="5"}待结算{/case}
											{case value="6"}结算待确认{/case}
											{case value="7"}待评价{/case}
											{case value="8"}成功订单{/case}
											{case value="11"}退款中{/case}
											{case value="12"}退款成功{/case}
										{default /}无效订单
										{/switch}
							</span></td>
							{if condition="$order_detail.status gt '2' && $order_detail.status lt '7'"}
							<td>
								<a href="{:url('book/borrowJiesuan')}?order_id={$order_detail['id']}"><span class="index_orderType">结算</span></a>
							</td>
							{/if}
  						</tr>
					</table>
						 <ul class="detail_timeList">
							 <li class="detail_timeSingle">
								付款时间：
								<span>{if condition="$order_detail.create_time neq '0'"}{$order_detail.create_time|date="Y-m-d H:i:s",###}{else /}{/if}</span>
							 </li>
							 <li class="detail_timeSingle">
								 发货时间：
								<span >{if condition="$order_detail.order_shipping_time neq '0'"}{$order_detail.order_shipping_time|date="Y-m-d H:i:s",###}{else /}{/if}</span>
							 </li>
								 <li class="detail_timeSingle">
									用户确认收货时间：
								<span >{if condition="$order_detail.order_delivery_time neq '0'"}{$order_detail.order_delivery_time|date="Y-m-d H:i:s",###}{else /}{/if}</span>
							 </li>
							 <li class="detail_timeSingle">
								 归还时间：
								<span>{if condition="$order_detail.order_goods_refund_time neq '0'"}{$order_detail.order_goods_refund_time|date="Y-m-d H:i:s",###}{else /}{/if}</span>
							 </li>
							 <li class="detail_timeSingle" style="width: 36.33%;">
								 商家备注：
								 <span>{$order_detail.remark}</span>
							 </li>
						 </ul>
						<?php if($order_detail['is_renew'] == 1){?>
						<p class="p-te" style="color: red;">
							<span>续租方式：</span>
							<span>
								{switch name="$order_detail.relet_info.pay_type"}
								{case value="0"}
								会员卡支付
								{/case}
								{case value="1"}支付宝{/case}
								{case value="2"}微信{/case}
								{case value="3"}支付宝h5{/case}
								{case value="4"}微信公众号{/case}
								{case value="5"}微信h5{/case}
								{/switch}
							</span>
							<span style="margin-left: 160px;">续租金额:</span>
							<span style="margin-left: 50px;">{$order_detail.relet_info.pay_amount}</span>
						</p>
						<i style="margin:10px 0;border-bottom:1px solid #d0d0d0; height:0;display:block"></i>
						<?php } ?>
						<p  class="p-te">
							<span>收货地址：</span>
							<span>{$order_detail.address_name}</span>
							<span>{$order_detail.mobile}</span>
							<span>{$order_detail.province}{$order_detail.city}{$order_detail.district}{$order_detail.address}</span>
						</p>
						<p class="p-te">
				 			<span>租赁时间：</span>
				 			<span >{if condition="($order_detail.rent_start_time neq '0')AND($order_detail.rent_end_time neq '0')"}{$order_detail.rent_start_time|date="Y-m-d",###}至{$order_detail.rent_end_time|date="Y-m-d",###}{else /}{/if}</span>
						</p>
						<p class="p-te">
				 			<span>买家留言：</span>
				 			<span>{$order_detail.user_message}</span>
						</p>
						<i style="margin:10px 0;border-bottom:1px solid #d0d0d0; height:0;display:block"></i>
					</div>
				{if condition="($order_detail.status lt '9')"}
					<div class="recond-titles" >
						<h3 >图书列表</h3>
					</div>
					<div class="detail_messBody">
						{foreach $order_detail.book_list as $k => $v}
						<a href="{:url('Book/updateBook')}?bookid={$v['id']}">
						<p class="p-te">
							<span><img style="width:45px;height: 60px;" src="{$v['img_medium']}"/></span>
							<span style="margin-left: 70px;">《{$v['title']}》</span>
							<span style="margin-left: 20px;">{$v['publisher']}</span>
							<span style="margin-left: 20px;">ISBN:{$v['isbn13']}</span>
							<?php if(isset($v['is_lose']) && $v['is_lose'] == 1){ ?>
							<span style="margin-left: 20px;color: red;">售价：{$v['price']*$v['discount']/100|sprintf ="%.2f",###}元&nbsp;&nbsp;(用户损坏、遗失或购买)</span>
							<?php } ?>
							<?php if($order_detail['status'] == 2 || $order_detail['status'] == 3){ ?>
							<span class="index_orderType book_change" style="margin-left: 20px;" data-id="{$v['id']}">更改</span>
							<?php } ?>

						</p>
						</a>
						{/foreach}
					</div>
				  	<div class="recond-titles" >
					   <h3 >收货物流信息</h3>
					 </div>
					<div class="detail_messBody">
						<p  class="p-te">
							<span>收货地址：</span>
			                <span>{$order_detail.address_name}</span>
			                <span>{$order_detail.mobile}</span>
                            <span>{$order_detail.province}{$order_detail.city}{$order_detail.district}{$order_detail.address}</span>
							{if condition="($order_detail.status gt '2')"}
							<a class="show_deliver_info"><span class="index_orderType" style="width:100px;display: inline-table;margin-left: 30px;">
							查看发货物流
							</span></a>
							{/if}
						</p>
					<p class="p-te"><span>物流方式:</span><span>快递</span></p>
					<p class="p-te"><span>物流公司:</span><span class="ship_company">
						{if condition="($order_detail.ship_count_down) gt '0'"}
						<select class="ship_type" style="width: 200px;height: 25px;font-size:14px;background-color:#e9e9e9;" disabled>
							<option value="shunfeng">顺丰快递</option>
							<option value="shentong">申通快递</option>
							<option value="zhongtong">中通快递</option>
							<option value="yuantong">圆通快递</option>
							<option value="yunda">韵达快递</option>
							<option value="gdems">EMS快递</option>
							<option value="quanfeng">全峰快递</option>
							<option value="tiantian">天天快递</option>
							<option value="debang">德邦快递</option>
							<option value="huitong">百世快递</option>
							<option value="zhaijisong">宅急送</option>
							<option value="auto">其他</option>
						</select>
						<a class="edit_ship_company"><span class="index_orderType">
							修改
						</span></a>
						<a class="save_ship_company" style="display: none;"><span class="index_orderType">
							保存
						</span></a>
						<label style="margin-left: 20px;" class="time_down">
							倒计时:<span class="time_num"></span>&nbsp;(发货之后24小时内,可对错误快递信息纠正)
						</label>
						{else /}
						{$order_detail.order_deliver_company}
						{/if}</span></p>
					<p class="p-te"><span>运单号:</span><span  class="ship_number">
						{if condition="($order_detail.ship_count_down) gt '0'"}
						<input type="text" class="ship_expressid" disabled style="width: 200px;height: 25px;position: relative;right: 30px;border: 0.5px rgb(169, 169, 169) solid" value="{$order_detail.order_deliver_expressid}"/>
						<a class="edit_ship_number"><span class="index_orderType" style="margin-left: -30px;">
							修改
						</span></a>
						<a class="save_ship_number" style="display: none;"><span class="index_orderType" style="margin-left: -30px;">
							保存
						</span></a>
						<label style="margin-left: 18px;" class="time_down">
							倒计时:<span class="time_num"></span>&nbsp;(发货后24小时内,可对错误快递信息纠正)
						</label>
						{else /}
						{$order_detail.order_deliver_expressid}
						{/if}</span></p>
					 </div>
					<div class="recond-titles" >
					   <h3 >归还物流信息</h3>
					</div>
					<div class="detail_messBody">
						<p  class="p-te">
							<span>归还地址:</span>
							{if condition="($order_detail.status gt '3') and ($order_detail.status lt '9')"}
								<!-- <span>{$order_detail.revent_receiver_name}</span>
								<span>{$order_detail.revent_tel}</span>
								<span>{$order_detail.revent_province}{$order_detail.revent_city}{$order_detail.revent_region}{$order_detail.revent_detailed_address}</span> -->
								<span>{$order_detail.return_back_address}</span>
								{if condition="($order_detail.status gt '4')"}
								<a class="show_return_info"><span class="index_orderType" style="width:100px;display: inline-table;margin-left: 30px;">
								查看归还物流
								</span></a>
								{/if}
							{else /}
								<span></span>
								<span></span>
								<span></span>
							{/if}
						</p>
						{if condition="$order_detail.status gt '3' "}
			            <p class="p-te"><span>物流方式:</span><span>快递</span></p>
						<p class="p-te"><span>物流公司:</span><span>{$order_detail.return_deliver_company}</span></p>
						<p class="p-te"><span>运单号:</span><span>{$order_detail.express_no}</span></p>
						{else /}
						<p class="p-te"><span>物流方式:</span></p>
						<p class="p-te"><span>物流公司:</span></p>
						<p class="p-te"><span>运单号:</span></p>
						 {/if}
					</div>
				{/if}
				</div>
			</div>
	</div>
</div>
<div id="modal-demo"  class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" style="margin-left: 500px;">
		<div class="modal-content radius" style="width: 600px;height: 450px;">
			<div class="modal-header">
				<h3 class="modal-title" style="text-align: center;">选择更改的图书</h3>
				<a class="close" data-dismiss="modal" aria-hidden="true" href="javascript:void();">×</a>
			</div>
			<div class="modal-body" style="height: 350px;">
				<input type="hidden" class="book_change_id" value="0">
				<div class="select_tab">
					<form action="{:url('book/searchBook')}" onsubmit="return false;" method="post" class="select_data" style="">
						<label style="position: relative;right: 100px;">书名关键字</label>
						<input type="text" name="keyword" class="input-text" style="width:250px;position: relative;right: 10px;" />
						<input type="submit" class="btn" id="search" value="搜索" style="position: relative;right: 10px;"/>
					</form>
				</div>
				<table class="book_tab">
					<thead style="text-align: center;display: none;" class="table-head">
					<tr>
						<td style="text-align: right;">封面</td>
						<td>书名</td>
					</tr>
					</thead>
					<tbody style="text-align: center;" class="book_body">

					</tbody>
				</table>
			</div>
			<div class="modal-footer">
				<span class="page_bat" style="margin-right: 20px;"></span>
				<span class="btn check_btn">确定</span>
				<button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
	var count_down = "{$order_detail.ship_count_down}";
	var ship_company = "{$order_detail.order_logistics_name}";
    var deliver_company = "{$order_detail.order_deliver_company}";
    var deliver_expressid = "{$order_detail.order_deliver_expressid}";
    if(count_down > 0) {
        $(".ship_type").val(ship_company);
    }
	function time_down(){
        count_down = count_down -1;
        if(count_down <= 0){
            $(".ship_company").html(deliver_company);
            $(".ship_number").html(deliver_expressid);
            clearInterval(time_down)
		}
        var hour = Math.floor(count_down/3600)+"";
        var minute = Math.floor((count_down-3600*hour)/60)+"";
        var second = (count_down-3600*hour-minute*60)+"";
        if(hour.length == 1){
            hour = "0"+hour;
        }
        if(minute.length == 1){
            minute = "0"+minute;
        }
        if(second.length == 1){
            second = "0"+second;
		}
		$(".time_num").html(hour+":"+minute+":"+second);
	}
	$(function(){
		$.Huitab("#tab_demo .tabBar span","#tab_demo .tabCon","current","click","0");
		if(parseInt(count_down) > 0){
		    setInterval(time_down,1000);
		}
		//编辑快递公司
		$(".edit_ship_company").click(function () {
		    $(this).hide();
            $(".save_ship_company").show();
            $(".ship_type").removeAttr("disabled");
            $(".ship_type").css("background-color","#fff");
        });
        //编辑快递单号
        $(".edit_ship_number").click(function () {
            $(this).hide();
            $(".save_ship_number").show();
            $(".ship_expressid").removeAttr("disabled");
        });
        //保存编辑快递公司
        $(".save_ship_company").click(function () {
            var ship_type_text = $(".ship_type").find("option:selected").text();
            var ship_type_val = $(".ship_type").val();
            var order_id = "{$order_detail.id}";
            $.post("{:url('book/editShipCompany')}",{name:ship_type_text,code:ship_type_val,order_id:order_id},function (data) {
                if(data.status == 1){
                    $(".ship_type").attr("disabled","disabled");
                    $(".ship_type").css("background-color","#e9e9e9");
                    $(".ship_type").val(data.data.code);
                    console.log(data.data.code);
                    deliver_company = data.data.name;
                    $(".save_ship_company").hide();
                    $(".edit_ship_company").show();
                }else{
                    layer.msg(data.msg);
                }
            },'json');
        });
        //保存编辑快递单号
        $(".save_ship_number").click(function () {
            var ship_expressid = $(".ship_expressid").val();
            var order_id = "{$order_detail.id}";
            $.post("{:url('book/editShipExpressid')}",{eid:ship_expressid,order_id:order_id},function (data) {
                if(data.status == 1){
                    $(".save_ship_number").hide();
                    $(".edit_ship_number").show();
                    $(".ship_expressid").val(data.data.eid);
                    deliver_expressid = data.data.eid;
                    $(".ship_expressid").attr("disabled","disabled");
                }else{
                    layer.msg(data.msg);
				}
            },'json');
        });

        $(".book_change").click(function(){
            $("#modal-demo").modal("show");
            $(".book_change_id").val($(this).attr("data-id"));
            return false;
        });

        $("#search").click(function () {
            var keyword = $("input[name='keyword']").val();
            $.post("{:url('book/searchBook')}",{keyword:keyword},function(data){
                if(data.status == 1){
                    $(".table-head").show();
                    var bdata = data.data;
                    var btab = $(".book_body");
                    btab.empty();
                    for(i=0;i<bdata.length;i++){
                        btab.append("<tr><td><input type='checkbox' class='sbook_item' style='width:20px;height: 20px;margin-right: 30px;' value='"+bdata[i]['id']+"'/>"
                            +"<img style='width:50px;height: 50px; ' src='"+bdata[i]['img_medium']+"'/></td>"
                            +"<td><span>"+bdata[i]['title']+"</span></td></tr>");
                    }
                }
            },'json');
        });

        $(".check_btn").click(function () {
            var obj_book = 0;
            var obj_count = 0;
            $(".sbook_item").each(function(){
                if($(this).prop("checked") == true){
                    obj_book = $(this).val();
                    obj_count++;
                }
            });
            if(obj_count > 1){
                layer.msg("只能选中一本绘本");
                return false;
            }
            if(obj_count == 0){
                layer.msg("请至少选中一本绘本");
                return false;
            }
            var order = "{$order_detail.id}";
            var book_change_id = $(".book_change_id").val();
            $.post("{:url('book/changeBook')}",{order:order,obj_book:obj_book,change_book:book_change_id},function(data){
                if(data.status == 1){
                    layer.msg('更改成功，将刷新页面');
                    window.location.reload();
                }else{
                    $("#modal-demo").modal("hide");
                    layer.msg('更改失败：'+data.msg);
                }
            },'json');
        })
	});
	var GG = {
        "kk":function(mm){
           var ym=mm;
        }
    }
	$("#page").initPage(71,1,GG.kk);
	$("#page1").initPage(71,1,GG.kk);
	$("#page2").initPage(71,1,GG.kk);
	$("#page3").initPage(71,1,GG.kk);
	$("#page4").initPage(71,1,GG.kk);

    "use strict";

    Vue.filter('dataForm', function (value) {
        if (value) {
            return value;
        }
    });
    var app = new Vue({
        el: ".message_main_talk",
        data: function data() {
            return {
                logisticsList: {}
            };
        },
        methods: {
            getLogisticsList: function getLogisticsList(company,code) {
                var self = this;
                self.logisticsList = {};
                $.ajax({
                    url: "{:url('book/getOrderLogistics')}",
                    type: "POST",
                    data: {
                        company: company,
                        code:code
                    },
                    async: true,
                    dataType: "json",
                    success: function success(response) {
                        if (response.status == 1) {
                            self.logisticsList = response.data;
                            self.logisticsList.reverse();
                            setTimeout(function () {
                                $(".message_main_content").scrollTop(500000);
                            }, 20);
                        }else{
                            layer.msg(response.msg);
                            return false;
						}
                    },
                    error: function error(_error) {
                    }
                });
            }
        },
        mounted: function mounted() {}
    });

	$(".show_deliver_info").click(function () {
	    var company = "{$order_detail.order_logistics_name}";
        var code = "{$order_detail.order_deliver_expressid}";
        app.getLogisticsList(company,code);
        layer.open({
            type: 1,
            skin: 'layui-layer-demo', //样式类名
            closeBtn: 1, //不显示关闭按钮
            anim: 2,
            title: "发货物流",
            area: ['700px', '570px'],
            shadeClose: true, //开启遮罩关闭
            content: $(".message_main_talk"),
            cancel: function cancel() {

            }
        });
    });

//20180327
    $(".show_return_info").click(function () {
        var company = "{$order_detail.return_logistics_name}";
        var code = "{$order_detail.express_no}";
        app.getLogisticsList(company,code);
        layer.open({
            type: 1,
            skin: 'layui-layer-demo', //样式类名
            closeBtn: 1, //不显示关闭按钮
            anim: 2,
            title: "归还物流",
            area: ['700px', '570px'],
            shadeClose: true, //开启遮罩关闭
            content: $(".message_main_talk"),
            cancel: function cancel() {

            }
        });
    });

</script>
 